<!--
 * @Author: Bennty
 * @Date: 2024-08-21 14:49:13
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2024-08-23 09:03:56
 * @Description: 请填写简介
-->
<template>
    <div class="p-2">
        <transition 
            :enter-active-class="proxy?.animate.searchAnimate.enter"
            :leave-active-class="proxy?.animate.searchAnimate.leave"
        >
            <el-form :model="queryParams" :inline="true" ref="queryFormRef">
                <el-form-item label="部件仓库" prop="totalCategory">
                        <el-select v-model="queryParams.warehouseName" placeholder="请选择">
                            <el-option label="报废仓" value="1"></el-option>
                            <el-option label="三江仓" value="2"></el-option>
                        </el-select>
                </el-form-item>
                <el-form-item label="模糊搜索" prop="componentName">
                    <el-input v-model="queryParams.componentName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </transition>
        <el-card shadow="never">
            <template #header>
                <el-row :gutter="8" class="mb8">
                    <!-- <el-col class="header-button-container" :span="1.5">
                        <el-button type="primary" plain icon="Plus">部件调拨申请</el-button>
                    </el-col> -->
                    <el-col class="header-button-container" :span="1.5">
                        <el-button type="success" plain icon="Sort" @click="handleClickMerge">合并库位</el-button>
                    </el-col>
                </el-row>
            </template>
            <el-table :data="componentsList" size="large" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column label="部件名称" prop="componentName" align="center"></el-table-column>
                <el-table-column label="仓库" prop="warehouseName" align="center"></el-table-column>
                <el-table-column label="库位" prop="warehousePosition" align="center"></el-table-column>
                <el-table-column label="库存数量(只)" prop="inventoryNumber" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-tooltip content="部件调拨申请" placement="top">
                            <el-button link type="primary" :style="{fontSize:'15px'}"  icon="Plus" @click="handleClickApplyAllocation(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link  :style="{fontSize:'15px',color:'#F75C4E'}"  icon="Delete" @click="handleClickDelete(scope.row)"></el-button>
                        </el-tooltip>
                        <el-tooltip content="部件清零" placement="top">
                            <el-button link :style="{fontSize:'15px',color:'#B886F8'}"  icon="Brush" @click="handleClickClear(scope.row)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <applyAllocation :visible = "applyAllocationVisible" :data="applyData" @close="handleCloseApplyAllocation"/>
        <mergeComponent :visible="mergeVisible" :data="multipleSelection" @close="handleCloseMerge"/>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus';
import { ComponentsInventoryVO } from "@/api/sj/warehouse/componentsInventory/types";
import applyAllocation from './components/applyAllocation.vue';
import mergeComponent from './components/mergeComponent.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const queryFormRef = ref<FormInstance>();
const data = reactive({
    queryParams:{
        warehouseName: undefined,
        componentName: undefined,
        pageNum: 1,
        pageSize: 30
    }
});
const multipleSelection = ref<ComponentsInventoryVO[]>([])
const componentsList = ref<ComponentsInventoryVO[]>([]);
const applyAllocationVisible = ref(false);
const applyData = ref<ComponentsInventoryVO>();
const mergeVisible = ref(false);


const { queryParams } = toRefs(data);

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
};

const resetQuery = () => {
    queryFormRef.value?.resetFields();
    handleQuery();
};

const handleSelectionChange = (val: ComponentsInventoryVO[]) => {
    multipleSelection.value = val;
}

/** 打开调拨申请 */
const handleClickApplyAllocation = (row:ComponentsInventoryVO)=>{
    applyAllocationVisible.value = true;
    applyData.value = row;
};

/** 关闭调拨申请 */
const handleCloseApplyAllocation = ()=>{
    applyAllocationVisible.value = false;
};

/** 对比部件名称与库位 */
const compareComponent = (componentList: ComponentsInventoryVO[])=>{
    const firstComponentName = componentList[0].componentName;
    const firstWarehouseName = componentList[0].warehouseName
    return componentList.every((item)=>{
        return item.componentName === firstComponentName && item.warehouseName === firstWarehouseName
    });
};

/** 打开合并部件 */
const handleClickMerge = ()=>{
    if(multipleSelection.value.length < 2){
        proxy?.$modal.msgWarning("需至少选择2条数据");
    }else{
        if(compareComponent(multipleSelection.value)){
            mergeVisible.value = true;
        }else{
            proxy?.$modal.msgWarning("选择名称且仓库均相同的部件");
        };
    };
};

/** 关闭合并部件 */
const handleCloseMerge = ()=>{
    mergeVisible.value = false;
};

/** 删除部件 */
const handleClickDelete = async(row:ComponentsInventoryVO)=>{
    await proxy?.$modal.confirm("删除后不可撤销，确定删除么？");
    proxy?.$modal.msgSuccess("删除成功");
};

/** 部件清零 */
const handleClickClear = async(row:ComponentsInventoryVO)=>{
    await proxy?.$modal.confirm("报废后不可撤销，确定删除么？");
    proxy?.$modal.msgSuccess("删除成功");
};

onMounted(()=>{
    componentsList.value.push(
        {
            id: 999,
            componentName: `HJF白卡盒(5人份)-蜡烛盒${1}`,
            warehouseName: '三江库',
            warehousePosition: 1,
            inventoryNumber: 500
        }
    );
    for(let i = 1; i<=30; i++){
        let componentData = {
            id: i,
            componentName: `HJF白卡盒(5人份)-蜡烛盒${i}`,
            warehouseName: '三江库',
            warehousePosition: 1,
            inventoryNumber: 500
        };
        componentsList.value.push(componentData);
    };
});
</script>

<style lang="scss" scoped>

</style>